<template>
	<view>
		<view class="options-box">
			<view v-if="wholeTag" @click="chooseOptions()" class="option-item oneFontColor" :class="{ 'option-item-active': ifChoosedNo }">
				<view class="twoFontSize textOmit" style="padding: 0 20rpx;">{{ wholeTag }}</view>
				<image v-if="ifChoosedNo" class="icon-select" src="/static/image/icon_select.png" mode="widthFix"></image>
			</view>
			<view
				class="option-item oneFontColor"
				:class="{ 'option-item-active': option.active || option.st }"
				v-for="(option, index) in optionsForDisplay"
				:key="index"
				@click="chooseOption(index)"
			>
				<view class="twoFontSize textOmit" style="padding: 0 20rpx;">{{ option.name }}</view>
				<image
					v-if="option.active || option.st"
					class="icon-select"
					src="/static/image/icon_select.png"
					mode="widthFix"
				></image>
			</view>
		</view>
		<view class="bottom-btn-box pd16 flex ac" style="--height--:80rpx;">
			<view @click="reset()" class="btn-border-display" style="flex: 0 0 36%;">重置</view>
			<view @click="confirm()" class="btn-fill-gradient" style="flex: 1 1 100%;--height--:84rpx;">确认</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "base-options",
	props: {
		options: {
			type: Array,
			default: () => []
		},
		// 用于一个页面多个多选项
		type: {
			type: String,
			default: ""
		},
		// 是否显示全部选项
		wholeTag: {
			type: String,
			default: ""
		}
	},
	watch: {
		options: {
			handler(options) {
				this.optionsForDisplay = this.options.map(option => {
					return {
						...option
					}
				})
				this.ifChoosedNo = this.optionsForDisplay.filter(i => i.active).length === 0
			},
			deep: true,
			immediate: true
		}
	},
	data() {
		return { optionsForDisplay: "", ifChoosedNo: false }
	},
	methods: {
		chooseOption(index) {
			this.optionsForDisplay.splice(index, 1, {
				...this.optionsForDisplay[index],
				...{ active: !this.optionsForDisplay[index].active }
			})

			this.ifChoosedNo = this.optionsForDisplay.filter(i => i.active).length === 0
		},
		chooseOptions() {
			if (!this.ifChoosedNo) {
				this.optionsForDisplay = this.optionsForDisplay.map(item => {
					item.active = false
					return item
				})
				this.ifChoosedNo = true
			}
		},
		confirm() {
			this.$emit("confirm", this.optionsForDisplay)
			this.$bus.$emit("confirmMultipleOptions", this.optionsForDisplay, this.type)
		},
		reset() {
			this.optionsForDisplay = this.optionsForDisplay.map(option => {
				option.active = false
				return option
			})
			this.ifChoosedNo = true
		}
	}
}
</script>

<style scoped>
.options-box {
	display: grid;
	grid-template-columns: repeat(var(--column--, 3), 1fr);
	grid-gap: 20rpx;
	padding: 0 32rpx;
	max-height: 60vh;
	overflow-y: scroll;
}

.options-box .option-item {
	position: relative;
	background: #f7f7f7;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 16rpx;
	border: 1px solid transparent;
	box-sizing: border-box;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.option-item.option-item-active {
	color: #6665EB;
	border-color: #6665EB;
	font-weight: bold;
	background: #ffffff;
}

.icon-select {
	position: absolute;
	bottom: 0;
	right: 0;
	transform: translateY(1px);
	width: 32rpx;
	height: 32rpx;
}

.bottom-btn-box .btn-border-display + .btn-fill-gradient {
	margin-left: 20rpx;
}
</style>
